﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZRender">
    <meta name="author" content="kener.linfeng@gmail.com">

    <script src="doc/asset/js/esl/esl.js"></script>

    <!-- Le styles -->
    <link href="doc/asset/css/bootstrap.css" rel="stylesheet">
    <link href="doc/asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="doc/asset/css/zrenderHome.css" rel="stylesheet">

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="doc/asset/ico/favicon.png">
  </head>

  <body id="home-body">

    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="index.html">ZRender</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/zrender">View on GitHub</a>
              <ul class="nav">
                <li class="active"><a href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Example <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="doc/example/demo.html">Demo</a></li>
                    <li><a href="doc/example/animation.html">Animation</a></li>
                    <li><a href="doc/example/chart.html">Chart</a></li>
                    <li><a href="doc/example/colorSeries.html">Color Series</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="doc/example/artist.html">Artist</a></li>
                    <li><a href="doc/example/slice.html">slice</a></li>
                  </ul>
                </li>
                <li><a href="doc/api/index.html" target="_blank">API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/zrender/archive/2.0.8.zip">ZIP (2.0.8)</a></li>
                    <li><a href="https://github.com/ecomfe/zrender/archive/master.zip">ZIP (Latest)</a></li>

                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://echarts.baidu.com" target="_blank">ECharts</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="face" id='face'></div>

    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container">
      <div class="featurette">
        <div class="span6 pull-right">
            <img src="doc/asset/img/zrender.png" />
        </div>
        <h2 class="featurette-heading">Architecture</h2>
        <p class="lead">MVC核心封装实现图形仓库、视图渲染和交互控制：</p>
        <ul>
            <li>Stroage(M) : shape数据CURD管理</li>
            <li>Painter(V) : canvase元素生命周期管理，视图渲染，绘画，更新控制</li>
            <li>Handler(C) : 事件交互处理，实现完整dom事件模拟封装</li>
        </ul>
        <ul>
            <li>shape : 图形实体，分而治之的图形策略，可定义扩展</li>
            <li>tool : 绘画扩展相关实用方法，工具及脚手架</li>
            <li>animation : 动画扩展，提供promise式的动画接口和常用缓动函数</li>
        </ul>
        <div style="float:left;margin:10px 10px 20px 10px;"><img src="doc/asset/img/device.png" /></div>
        <div>
            <img src="doc/asset/img/explorer.png" />
            <p>&nbsp;&nbsp;<i>(IE8- supported by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></p>
        </div>
      </div>
      <h2 class="featurette-heading">特色</h2>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-left">
            <pre>
require(
    ['zrender'],
    function(zrender) {
        // just init to get a zrender Instance
        var zr = zrender.init(document.getElementById('main'));
        // zr can be used now!
        ...
    }
);</pre>
        </div>
        <h2 class="featurette-heading">简单</h2>
        <p>无需canvas基础，精简的接口方法，符合AMD标准，易学易用。</p>
      </div>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-right">
            <pre>
var CircleShape = require('zrender/shape/Circle');
zr.addShape(
    new CircleShape({
        style : {
            x : 100,
            y : 100,
            r : 50,
            color : 'rgba(220, 20, 60, 0.8)'
        }
    })
);
zr.render();</pre>
        </div>
        <h2 class="featurette-heading">数据驱动</h2>
        <p>利用zrender绘图，你只需做的是定义图形数据，剩下的事情就交给zrender吧~</p>
        <p>哦，对了，差点忘记告诉你，只要在你定义图形数据时设置draggable属性为true，图形拖拽就已经可用了！</p>
        <p><a href="doc/example/demo.html" target="_blank">tyr this »</a></p>
      </div>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-left">
            <pre>
var CircleShape = require('zrender/shape/Circle');
zr.addShape(
    new CircleShape({
        style : {...},
        // 图形元素上绑定事件
        onmouseover : function(params) {
            console.log('catch you!');
        }
    })
);

// 全局事件
zr.on('click', function(params) {alert('Hello, zrender!')});</pre>
        </div>
        <h2 class="featurette-heading">完整的事件封装</h2>
        <p>用你再熟悉不过的dom事件模型去操作canvas里的图形元素是件很cool的事情~</p>
        <p>你不仅可以响应zrender全局事件，你甚至可以为在特定shape上添加特定事件，后续发生的一切都会按你想的那样去运行~</p>
        <p><a href="doc/example/demo.html?code=%0D%0Avar%20CircleShape%20%3D%20require(%27zrender%2Fshape%2FCircle%27)%3B%0D%0Azr.addShape(new%20CircleShape(%7B%0D%0A%20%20%20%20clickable%20%3A%20true%2C%0D%0A%20%20%20%20style%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20x%3A%20100%2C%0D%0A%20%20%20%20%20%20%20%20y%3A%20100%2C%0D%0A%20%20%20%20%20%20%20%20r%3A%2050%2C%0D%0A%20%20%20%20%20%20%20%20color%3A%20%27red%27%0D%0A%20%20%20%20%7D%0D%0A%7D))%3B%0D%0Azr.render()%3B%0D%0A%0D%0Avar%20config%20%3D%20require(%27zrender%2Fconfig%27)%3B%0D%0Azr.on(%0D%0A%20%20%20%20config.EVENT.CLICK%2C%0D%0A%20%20%20%20function(params)%20%7B%0D%0A%20%20%20%20%20%20%20%20if%20(params.target)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20alert(%27Click%20on%20shape!%27)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20else%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20alert(%27None%20shape%2C%20but%20i%20catch%20you!%27)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A)%3B%0D" target="_blank">try this »</a></p>
      </div>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-right">
            <pre>
zr.addShape(shapeA);    // shapeA.zlevel = 0; (default)
zr.addShape(shapeB);    // shapeB.zlevel = 1;
zr.render();

zr.modShape(shapeB.id, {color:'red'});
// Don't worry! Is merge!

zr.refresh();
// Just the level 1 canvas has been refresh~</pre>
        </div>
        <h2 class="featurette-heading">高效的分层刷新</h2>
        <p>正如css中zlevel的作用一样，你可以定义把不同的shape分别放在不同的层中，这不仅实现了视觉上的上下覆盖，更重要的是当图形元素发生变化后的refresh将局限在发生了变化的图形层中，这在你利用zrender做各种动画效果时将十分有用，性能自然也更加出色~</p>
        <p><a href="doc/example/artist.html" target="_blank">tyr this »</a></p>
      </div>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-left">
            <pre>
var CircleShape = require('zrender/shape/Circle');
var myShape = new CircleShape({
    zlevel : 1,
    style : {
        ... // color | strokeColor | text | textFont | ...
    },
    draggable : true
});</pre>
        </div>
        <h2 class="featurette-heading">丰富的图形选项</h2>
        <p>当前内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片。Will be more..），统一且丰富的图形属性充分满足你的个性化需求！</p>
        <p><a href="doc/example/demo.html" target="_blank">tyr this »</a></p>
      </div>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-right">
            <pre>
zr.addShape(newShape);
zr.render();
zr.animate(newShape.id)
  .when(1000, { position : [300, 200] })
  .when(2000, { position : [30, 400] })
  .start('BounceOut');</pre>
        </div>
        <h2 class="featurette-heading">强大的动画支持</h2>
        <p>提供promise式的动画接口和常用缓动函数，轻松实现各种动画需求~</p>
        <p><a href="doc/example/demo.html?code=%0D%0Avar%20CircleShape%20%3D%20require(%27zrender%2Fshape%2FCircle%27)%3B%0D%0Avar%20circle%20%3D%20new%20CircleShape(%7B%0D%0A%20%20%20%20id%3A%20require(%27zrender%2Ftool%2Fguid%27)()%2C%0D%0A%20%20%20%20position%3A%20%5B100%2C%20100%5D%2C%0D%0A%20%20%20%20rotation%3A%20%5B0%2C%200%2C%200%5D%2C%0D%0A%20%20%20%20scale%3A%20%5B1%2C%201%5D%2C%0D%0A%20%20%20%20style%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20x%3A%200%2C%0D%0A%20%20%20%20%20%20%20%20y%3A%200%2C%0D%0A%20%20%20%20%20%20%20%20r%3A%2050%2C%0D%0A%20%20%20%20%20%20%20%20brushType%3A%20%27both%27%2C%0D%0A%20%20%20%20%20%20%20%20color%3A%20%27rgba(220%2C%2020%2C%2060%2C%200.8)%27%2C%0D%0A%20%20%20%20%20%20%20%20strokeColor%3A%20%22rgba(220%2C%2020%2C%2060%2C%200.8)%22%2C%0D%0A%20%20%20%20%20%20%20%20lineWidth%3A%205%2C%0D%0A%20%20%20%20%20%20%20%20text%3A%20%27circle%27%2C%0D%0A%20%20%20%20%20%20%20%20textPosition%3A%20%27inside%27%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20draggable%3A%20true%0D%0A%7D)%3B%0D%0Azr.addShape(circle)%3B%0D%0Azr.render()%3B%0D%0A%0D%0Azr.animate(circle.id%2C%20%22%22%2C%20true)%0D%0A%20%20%20%20.when(1000%2C%20%7B%0D%0A%20%20%20%20%20%20%20%20position%3A%20%5B200%2C%200%5D%0D%0A%20%20%20%20%7D)%0D%0A%20%20%20%20.when(2000%2C%20%7B%0D%0A%20%20%20%20%20%20%20%20position%3A%20%5B200%2C%20200%5D%0D%0A%20%20%20%20%7D%2C%20%22BounceIn%22)%0D%0A%20%20%20%20.when(3000%2C%20%7B%0D%0A%20%20%20%20%20%20%20%20position%3A%20%5B0%2C%20200%5D%0D%0A%20%20%20%20%7D)%0D%0A%20%20%20%20.when(4000%2C%20%7B%0D%0A%20%20%20%20%20%20%20%20position%3A%20%5B100%2C%20100%5D%0D%0A%20%20%20%20%7D).start()%3B%0D" target="_blank">try this »</a></p>
      </div>
      <hr class="featurette-divider">
      <div class="featurette">
        <div class="span5 pull-left">
            <pre>
function MyShape() { ... }

zr.addShape(
    new MyShape({           // and use it!
        style : {...},
        ...
    })
);</pre>
        </div>
        <h2 class="featurette-heading">易于扩展</h2>
        <p>分而治之的图形定义策略允许你扩展自己独有的图形元素，你既可以完整实现三个接口方法（brush、drift、isCover），也可以通过base派生后仅实现你所关心的图形细节。</p>
        <p><a href="doc/example/myShape.html" target="_blank">tyr this »</a></p>
      </div>
      <hr>
      <!-- /END THE FEATURETTES -->

      <!-- FOOTER -->
      <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/zrender/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="doc/changelog.html" target="_blank">Changelog</a></p>
      </footer>

    </div><!-- /.container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="doc/asset/js/jquery.js"></script>
    <script src="doc/asset/js/bootstrap-transition.js"></script>
    <script src="doc/asset/js/bootstrap-alert.js"></script>
    <script src="doc/asset/js/bootstrap-modal.js"></script>
    <script src="doc/asset/js/bootstrap-dropdown.js"></script>
    <script src="doc/asset/js/bootstrap-scrollspy.js"></script>
    <script src="doc/asset/js/bootstrap-tab.js"></script>
    <script src="doc/asset/js/bootstrap-tooltip.js"></script>
    <script src="doc/asset/js/bootstrap-popover.js"></script>
    <script src="doc/asset/js/bootstrap-button.js"></script>
    <script src="doc/asset/js/bootstrap-collapse.js"></script>
    <script src="doc/asset/js/bootstrap-carousel.js"></script>
    <script src="doc/asset/js/bootstrap-typeahead.js"></script>
    <script>
        var zr; // 全局可用zrender对象
        var animationTicket;    // 全局动画索引

        var developMode = false;
        if (developMode) {
            // for develop
            require.config({
                packages: [
                    {
                        name: 'zrender',
                        location: 'src',
                        main: 'zrender'
                    }
                ]
            });
        }
        else {
            // for echarts online home page
            var fileLocation = './doc/example/www/js/zrender';
            require.config({
                paths:{ 
                    zrender: fileLocation,
                    'zrender/shape/Rose': fileLocation,
                    'zrender/shape/Trochoid': fileLocation,
                    'zrender/shape/Circle': fileLocation,
                    'zrender/shape/Sector': fileLocation,
                    'zrender/shape/Ring': fileLocation,
                    'zrender/shape/Ellipse': fileLocation,
                    'zrender/shape/Rectangle': fileLocation,
                    'zrender/shape/Text': fileLocation,
                    'zrender/shape/Heart': fileLocation,
                    'zrender/shape/Droplet': fileLocation,
                    'zrender/shape/Line': fileLocation,
                    'zrender/shape/Image': fileLocation,
                    'zrender/shape/Star': fileLocation,
                    'zrender/shape/Isogon': fileLocation,
                    'zrender/shape/BezierCurve': fileLocation,
                    'zrender/shape/Polyline': fileLocation,
                    'zrender/shape/Path': fileLocation,
                    'zrender/shape/Polygon': fileLocation
                }
            });
        }

        
        require(
            [
                'zrender', 
                'zrender/shape/Line', 
                'zrender/shape/Text', 
                'zrender/shape/Circle'
            ],
            function (zrender, LineShape, TextShape, CircleShape) {
                var zr = zrender.init(document.getElementById('face'));
                var zrColor = require('zrender/tool/color');
                var colorIdx = 0;
                var width = Math.ceil(zr.getWidth());
                var height = Math.ceil(zr.getHeight());

                var i;
                var n = 50;
                var shapeList = [];
                var pos;
                var len;
                var xStart;
                // 动画元素
                for(i = 0; i < n; i++) {
                    xStart = -Math.ceil(Math.random() * 1000);
                    len = Math.ceil(Math.random() * 400);
                    pos = Math.ceil(Math.random() * height);
                    shapeList[i] = new LineShape({
                        id : (new Date() - 1) + '-' + i,
                        style : {
                            xStart : xStart,
                            yStart : pos,
                            xEnd : xStart + len,
                            yEnd : pos,
                            strokeColor : zrColor.random(),
                            lineWidth : 1
                        },
                        _animationX : Math.ceil(Math.random() * 100),
                        _len : len,
                        hoverable : false
                    });
                    zr.addShape(shapeList[i]);
                }
                var aniText = new TextShape({
                    id : (new Date() - 1) + '-kener',
                    style : {
                        x : width / 2,
                        y : 90,
                        brushType : 'stroke',
                        strokeColor : 'rgba(255, 255, 255, 0.2)',
                        lineWidth : 1,
                        text : 'ZRender',
                        textFont : 'bold 60px verdana',
                        textAlign : 'center'
                    },
                    _animationSize : 60,
                    hoverable:false
                });

                zr.addShape(aniText);

                zr.addShape(new TextShape({
                    zlevel : 1,
                    style : {
                        x : width / 2,
                        y : 80,
                        brushType : 'both',
                        color : zrColor.getLinearGradient(
                                    0, 70, 0, 110,
                                    [[0, '#c7ffbb'],[1,'#00afdd']]
                                ),
                        strokeColor : '#ffff77',
                        lineWidth : 2,
                        shadowBlur: 15,
                        shadowColor : 'rgba(255,215,0,0.8)',
                        text : 'ZRender',
                        textFont : 'bold 80px "Times New Roman"',
                        textAlign : 'center'
                    },
                    draggable : true
                }));

                zr.addShape(new TextShape({
                    shape : 'text',
                    zlevel : 1,
                    style : {
                        x : width / 2,
                        y : 150,
                        color : 'rgba(210, 105, 30, 1)',
                        shadowBlur: 10,
                        shadowColor : 'rgba(255,215,0,0.8)',
                        text : '一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！',
                        textFont : 'normal 18px 微软雅黑',
                        textAlign : 'center'
                    }
                }));

                zr.addShape(new CircleShape({
                    zlevel : 1,
                    style : {
                        x : width / 2,
                        y : 220,
                        r : 20,
                        brushType : 'both',
                        color : 'rgba(255, 69, 0, 1)',
                        strokeColor : 'rgba(255, 255, 255, 1)',
                        lineWidth : 8,
                        shadowBlur: 20,
                        shadowColor : 'rgba(255,215,0,0.8)',
                        text : 'Try',
                        textPosition : 'inside',
                        textFont : 'normal 18px 微软雅黑',
                        textAlign : 'center'
                    },
                    clickable : true,
                    onclick : function(){
                        window.location = 'doc/example/demo.html';
                    }
                }));


                // 绘画，利用render的callback可以在绘画完成后马上开始动画
                zr.render(function(){
                    animationTicket = setInterval(
                        function(){
                            var style;
                            for( i = 0; i < n; i++) {
                                // 可以跳过
                                style = shapeList[i].style;

                                if (style.xStart >= width){
                                    shapeList[i]._len = Math.ceil(Math.random() * 400);
                                    shapeList[i].style.xStart = -400;
                                    shapeList[i].style.xEnd = -400 + shapeList[i]._len;
                                    shapeList[i].style.yStart = Math.ceil(Math.random() * height);
                                    shapeList[i].style.yEnd = shapeList[i].style.yStart;
                                }
                                shapeList[i].style.xStart += shapeList[i]._animationX;
                                shapeList[i].style.xEnd += shapeList[i]._animationX;

                                // 就看这句就行了
                                zr.modShape(shapeList[i].id, shapeList[i]);
                            }
                            aniText._animationSize += Math.round(2000 / aniText._animationSize);
                            if (aniText._animationSize > 500) {
                                aniText._animationSize = 60;
                            }
                            aniText.style.textFont = 'bold ' + aniText._animationSize + 'px verdana';
                            zr.modShape(aniText.id, aniText);

                            zr.refresh();
                        },
                        50
                    )
                });
            }
        );
    </script>
  </body>
</html>
